<template>
  <view class="PrivacyAgreement">
    <view class="main" @tap="$emit('input', !value)">
      <view class="main-btn">
        <image class="main-btn-icon" :src="`http://alumniassets.swu.edu.cn/miniProgram/image/alumni/check${value ? '-a' : ''}.png`" mode="aspectFit" />
      </view>
      <view class="main-text">
        我同意西大校友会
        <text class="main-text-link" @tap.stop="$to('/pages/home/news/detail', { id: agreement.user, type: 2 })">《服务协议》</text>
        <!-- 及
        <text class="main-text-link" @tap.stop="$to('/pages/home/news/detail', { id: agreement.privacy, type: 2 })">《隐私政策》</text>
        。 -->
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    computed: mapState(['agreement']),
    props: {
      value: {
        type: Boolean,
        required: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    width: 100%;
    display: flex;
  }
  .main-btn {
    height: 36rpx;
    display: flex;
    align-items: center;
    padding-right: 20rpx;
  }
  .main-btn-icon {
    width: 24rpx;
    height: 24rpx;
  }
  .main-text {
    flex: 1;
    color: $fc;
    font-size: $fs - 4;
    line-height: 36rpx;
  }
  .main-text-link {
    color: $main;
    font-weight: 500;
  }
</style>
